<b> Project CycleSense Routing Display </b>
<p><p>

{{ msg }}
<p>
{% if altAddr %}
{% for addr in altAddr %}
{% if addr.3 %}
	{{ addr.0 }} or {{ addr.1 }} {{ addr.2 }} {{ addr.3 }}
{% else %}	 
	{{ addr.0 }} {{ addr.1 }} {{ addr.2 }}
{% endif %}
<br>
{% endfor %}
{% endif %}
<p>

{% if show_map %}
    <p>
    {{ start }}
    <p>
    {{ end }}
    <p>
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1rfrl7nTsOaDr8ORSL_M9xQ10uPyPSMOlZNPZJg7t3cDx-UuTRSX4yLWz3hAGA7roX_JCVc44CNP3A"
	            type="text/javascript"></script>
	<script type="text/javascript">
		var numRoutes = {{numRoutes}};
		var arrayRoutes = [ {% for route in arrayRoutes %} [ {% for pair in route %} [ {{ pair.0 }} , {{ pair.1 }} ] {% if not forloop.last %},{% endif %} {% endfor %}] {% if not forloop.last %},{% endif %}{% endfor %}];
		var center = [{{ center.0 }} , {{ center.1 }}];
		var colors = [{% for x in colors %} '{{ x }}' {% if not forloop.last %},{% endif %}{% endfor %}];
                var toggleState = [ {% for route in arrayRoutes %} 1 {% if not forloop.last %},{% endif %}{% endfor %}];
                var routesArray = new Array();
                var map;

	       function initialize() {
			if (GBrowserIsCompatible()) {
                                map = new GMap2(document.getElementById("map_canvas"));
		                map.setCenter(new GLatLng(center[0], center[1]), 13);

				var i = 0;				
				for (i = 0; i < numRoutes; i++) {
					var tempRoute = arrayRoutes[i];
					var lengthOfRoute = tempRoute.length;
					var j = 0;	
                                        var polylineArray = new Array();
					for (j = 0; j < lengthOfRoute; j++) {
						var tempCoordinate = tempRoute[j];
						var lat = tempCoordinate[0];
						var lon = tempCoordinate[1];
						polylineArray[j] = new GLatLng(lat,lon);
					}
                                        routesArray[i] = new GPolyline(polylineArray,colors[i],5);;
                                        map.addOverlay(routesArray[i]);
				}
				map.addControl(new GLargeMapControl());
                                map.addControl(new GMapTypeControl());
                                //var polyline = new GPolyline([ {% for route in arrayRoutes %} {% for pair in route %} new GLatLng( {{ pair.1 }},{{pair.0}}) {% if not forloop.last %},{% endif %}{%endfor%}{%endfor%}], "#ff0000", 10);			
                                //map.addOverlay(polyline);
			}
                }
                function toggleRoute(x) {
                    x = x-1;
                    if (toggleState[x] == 1){
                        map.removeOverlay(routesArray[x]);
                        toggleState[x] = 0;
                    } else{
                        map.addOverlay(routesArray[x]);
                        toggleState[x] = 1;
                    }
                }

      
	</script>
   <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
    <div id="message"></div>
    {% for x in arrayRoutes %}
        <input type="button" value="Route {{ forloop.counter }}" onClick="toggleRoute({{ forloop.counter }});"/>
    {% endfor %}
  </body>

<p>
Process Time: {{ processTime }}
<p>

{% endif %}

<form name="search" action="/route/" method="post">
<table border = "1">

<tr><th>Searches</th></tr>

<tr>
<td>Start Address: </td>
<td><input type="text" name="start" value="{{ start }}" /></td>
<td>End Address: </td>
<td><input type="text" name="end" value="{{ end }}" /></td>
</tr>

<tr>
<td>Number of routes:</td>
<td><input type="text" name="numRoutes" value="{{ numRoutes }}" /></td>
<td>Weight of edge:</td>
<td><input type="text" name="weight" value="{{ weight }}" /></td>
</tr>

<tr>
<td>Start time:</td>
<td><input type="text" name="startTime" value="{{ startTime }}" /></td>
<td>Similarity Score Floor</td>
<td><input type="text" name ="simLmt" value="{{ simLmt }}" /></td>
</tr>

<tr>
<td>Transportation</td>
<td>Car  <input type="radio" name = "modeOfT" value = "car" {% ifequal modeOfT "car" %}checked{% endifequal %} {% if not modeOfT %} checked {% endif %} />
    Bike <input type="radio" name = "modeOfT" value = "bike"{% ifequal modeOfT "bike"%}checked{% endifequal %} /></td>

<td>Noise?</td>
<td>Yes <input type="radio" name = "noise" value = "yes"  {% ifequal noise "yes" %}checked {% endifequal %} {% if not noise %} checked {% endif %} />
    No  <input type="radio" name = "noise" value = "no" {% ifequal noise "no" %}checked{% endifequal %} /></td>
</tr>

</table>

<input type="hidden" name="option" value="search">
<input type="submit" value="search" />
</form>







<form name="search" action="/route/" method="post">

<table border = "1">

<tr><th>Update DB</th></tr>

<tr>
<td>Road name</td>
<td><input type="text" name="changeAddr" /></td>
<td>Update ranking</td>
<td><input type="text" name="ranking" /></td>
</tr>

<tr>
<td>Car availability</td>
<td>Available  <input type = "radio" name = "unavailableCars" value = False />
    Unavailable<input type = "radio" name = "unavailableCars" value = True /></td>
<td>Bike availability</td>
<td>Available  <input type = "radio" name = "unavailableBikes" value = False />
    Unavailable<input type = "radio" name = "unavailableBikes" value = True />
</td>
</tr>

</table>

<input type="hidden" name="option" value="update">
<input type="submit" value="update" />
</form>









<form name="upload" action="/route/" method="post">

<table border = "1">
<tr><th>Upload to Sensorbase</th></tr>

<tr><td>Sensorbase username</td><td><input type="text" name="sbuser" value = {{ sbuser }} ></td></tr>
<tr><td>Sensorbase password</td><td><input type="password" name="sbpw" value = {{ sbpw }} ></td></tr>
<tr><td>Project ID</td><td><input type="text" name="proj_id" value = {{ projID }} ></td></tr>
<tr><td>Table Name</td><td><input type="text" name="table_name" value = {{ table }} ></td></tr>
</table>
    {% for x in arrayRoutes %}
        Upload Route {{ forloop.counter }} <input type="checkbox" name="{{ forloop.counter }}" value = {{ forloop.counter }} /><br>
    {% endfor %}

<input type="hidden" name="option" value="upload">
<input type="submit" value="upload" />
</form>